<template>
    <div class="input-tags">
        <VueTagsInput
            v-model="tag"
            tabindex="-1"
            :autocomplete-items="tags"
            :tags="localValue"
            :placeholder="i18n.t('addTag')"
            @tags-changed="onChange"
        />
    </div>
</template>

<script setup lang="ts">
import { VueTagsInput } from '@sipec/vue3-tags-input'
import { useTagStore } from '@/store/tags'
import { computed, ref } from 'vue'
import { i18n } from '@/electron'

interface Props {
    modelValue: string[]
}

interface Emits {
    (e: 'update:modelValue', value: string[]): void
}

const emit = defineEmits<Emits>()

const props = defineProps<Props>()

const tagStore = useTagStore()

const localValue = computed({
    get: () => props.modelValue.map((i) => ({ text: i })),
    set: (v) => {
        emit(
            'update:modelValue',
            v.map((i) => i.text)
        )
    }
})

const tag = ref('')

const tags = computed(() => {
    return tagStore.tags
        .map((i) => ({ text: i.name }))
        .filter(
            (i) => i.text.toLowerCase().indexOf(tag.value.toLowerCase()) !== -1
        )
})

const onChange = (v: string[]) => {
    emit('update:modelValue', v)
}
</script>

<style lang="scss" scoped>
.input-tags {
    :deep(.vue-tags-input) {
        max-width: unset;
    }
    :deep(.ti-input) {
        padding: 0;
        border: none;
    }
    :deep(.ti-tags) {
        gap: 4px;
        .ti-new-tag-input-wrapper {
            margin: 0;
            input {
                size: 11px;
            }
        }
        .ti-new-tag-input {
        }
    }
    :deep(.ti-autocomplete) {
        margin-top: 2px;
        overflow-y: scroll;
        .ti-selected-item {
        }
    }
    :deep(.ti-tag) {
        margin: 0;
        padding: 0 4px;
        border-radius: 3px;
        font-size: 11px;
        .ti-icon-close {
            position: relative;
            top: 1px;
        }
    }
}
</style>
